<template>
    <view class="time-line">
        <view v-for="(item, index) in timeLineData" :key="index" class="time-line-item">
            <view class="flex" :class="{ clear }">
                <tm-text class="mr-12 year" :font-size="28" color="#999999" :label="`${item.date}年`"></tm-text>
                <tm-text class="mr-12" :font-size="28" color="#333333" :label="item.dictValue"></tm-text>
                <tm-icon @click="handleClear(item)" v-if="clear" :font-size="28" color="#8C754E"
                    name="tmicon-times-circle-fill"></tm-icon>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
    const props = defineProps({
        timeLineData: {
            type: Array,
            default: () => ([]),
        },
        clear: {
            type: Boolean,
            default: false,
        },
    });

    const emit = defineEmits(['clear']);

    const handleClear = (item) => {
        emit('clear', item);
    };
</script>
<style lang="less" scoped>
    .time-line {
        background-color: #F5F1EA;
        border-radius: 8rpx;
        padding: 28rpx 44rpx;
    }

    .time-line-item {
        display: flex;
        padding: 12rpx 0;
        position: relative;
        padding-left: 24rpx;

        .year {
            min-width: 100rpx;
        }

        .clear {
            background-color: #E6D9C3;
            padding: 4rpx 12rpx;
            border-radius: 4rpx;
        }

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10rpx;
            height: 10rpx;
            background-color: #A37C3D;
            border-radius: 50%;
            z-index: 1;
        }

        &::after {
            content: '';
            position: absolute;
            left: 4rpx;
            top: 50%;
            width: 2rpx;
            height: calc(100%);
            background-color: #A37C3D;
            transform: translateY(0);
        }

        &:last-child::after {
            height: 0;
        }
    }
</style>